<template>
  <div class="ajax">
    <a-row>
      <a-col :span="14">
        <div style="text-align: center"><h1>输入处</h1></div>
        <a-form
          :form="form"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 14 }"
        >
          <a-form-item label="接口名称">
            <a-input v-model="form.ajaxNameCN" />
          </a-form-item>
          <a-form-item label="接口地址">
            <a-input v-model="form.ajaxPath" />
          </a-form-item>
          <a-form-item label="请求类型">
            <a-select
              placeholder="Select a option and change input text above"
              v-model="form.ajaxMethod"
            >
              <a-select-option
                :value="item"
                v-for="(item, index) in [
                  'post',
                  'get',
                  'delete',
                  'put',
                  'option',
                ]"
                :key="index"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <!--  -->
          <a-form-item label="模块名称">
            <a-input v-model="form.moduleName" />
          </a-form-item>
          <!--  -->
          <a-form-item label="导出类名">
            <a-input v-model="form.className" />
          </a-form-item>
          <!--  -->
          <a-form-item label="接口示例">
            <a-textarea
              placeholder="暂时未开发"
              :rows="10"
              v-model="form.ajaxExample"
              :disabled="true"
            />
          </a-form-item>

          <!--  -->
          <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
            <a-button @click="Submit"> 生成代码 </a-button>
          </a-form-item>
        </a-form>
      </a-col>
      <a-col :span="10">
        <div style="text-align: center"><h1>代码区</h1></div>
        <h2>1、设置请求路径 文件路径：src/services/config.js</h2>
        <div class="code">
          <pre>
          {{ configTemplate }}
        </pre
          >
        </div>

        <h2>2、封装对应 ajax 请求模块 文件路径： {{ form.moduleName }}</h2>
        <div class="code">
          <pre>
          {{ ajaxModule }}
        </pre
          >
        </div>

        <h2>3、在组件中使用 文件路径： src/views/xxx.vue</h2>
        <div class="code">
          <pre>{{ useInVue }}</pre>
        </div>
      </a-col>
    </a-row>

    <!-- 

     -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      formLayout: "horizontal",
      visible: true,
      configTemplate: "",
      ajaxModule: "",
      useInVue: "",
      form: {
        ajaxNameCN: "出入预冷库记录-通过id删除",
        ajaxPath: "/fruiting/fruitingprecoolingroom/delete", // 接口地址
        ajaxMethod: "get", // 接口类型
        moduleName: "src/services/modules/QiChuShuJu/QiChuShuJuChaXun.js",
        className: "LoginHttpUl",
        ajaxExample: "",
      },
    };
  },
  methods: {
    Submit() {
      const form = JSON.parse(JSON.stringify(this.form));

      let ajaxNameEN = "",
        ajaxModule = "\n",
        configTemplate = "\n",
        useInVue = "",
        ajaxOptions = "",
        isGetMethod = false;
      let ajaxPathArr = form.ajaxPath.split("/");

      ajaxNameEN =
        ajaxPathArr[ajaxPathArr.length - 1] +
        ajaxPathArr[ajaxPathArr.length - 2];

      configTemplate += `${ajaxNameEN}: base_url + "${form.ajaxPath}", // ${form.ajaxNameCN}`;

      this.configTemplate = configTemplate;

      form.ajaxMethod === "get" && (isGetMethod = true);

      ajaxOptions = isGetMethod ? "queryPath" : "options";

      ajaxModule += `${ajaxNameEN}(${ajaxOptions}) { \n`;
      ajaxModule += `  return this._${form.ajaxMethod}(AJAX_PATH.${ajaxNameEN}, ${ajaxOptions}) \n`;
      ajaxModule += "}";

      this.ajaxModule = ajaxModule;

      // 对路径进行处理
      form.moduleName = form.moduleName.replace("src", "@");
      form.moduleName = form.moduleName.replace(/\\/g, "/");

      // src\services\modules\QiChuShuJu\QiChuShuJuChaXun.js
      useInVue += "<script>\n";

      useInVue += "// 1、导入对应的类 \n";
      useInVue += `import { ${form.className} } from "${form.moduleName}"; \n`;
      useInVue += "// 2、将请求类 进行实例化 \n";
      useInVue += `const http${form.className} = new ${form.className}(); \n`;
      useInVue += "\n";

      useInVue += "default export{\n";
      useInVue += "  methods:{\n";
      useInVue += "    xxx_Name_xxx(){\n";
      useInVue += "      // 3、发送请求，并接收服务器传递回来的数据\n";
      useInVue += `      let ${ajaxOptions} = ${
        isGetMethod ? '"?"' : "{}"
      } // 需要提交的数据\n`;
      useInVue += "\n\n";
      useInVue += "      // 通过 .then 形式进行接收（Promise形式）\n";
      useInVue += `      http${form.className}.${ajaxNameEN}(${ajaxOptions})\n`;
      useInVue += "        .then(res => {\n";
      useInVue += "          if(res.success){\n";
      useInVue += "            this.$message.success(res.message)\n";
      useInVue += "          }else{\n";
      useInVue += "            this.$message.error(res.message)\n";
      useInVue += "            return\n";
      useInVue += "          }\n";
      useInVue += "          const data = res.result\n";
      useInVue += "          console.log('接口请求数据：',data);\n";
      useInVue += "      });\n";
      useInVue += "    }\n";
      useInVue += "  }\n";
      useInVue += "}\n";

      useInVue += `<script>`;

      this.useInVue = useInVue;
    },
  },
};
</script>

<style lang="less">
.code {
  background-color: #e3e3e3;
  border-radius: 5px;
}
pre {
  margin-top: 15px;
  margin-left: 10px;
}
</style>